<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>协议解析工具</title>
    <!-- Bootstrap CSS -->
    <link href="/protoDecToolkit/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link href="/protoDecToolkit/css/bootstrap-icons.css" rel="stylesheet">
    <!-- Prism.js CSS for syntax highlighting -->
    <link href="/protoDecToolkit/css/prism-tomorrow.min.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="/protoDecToolkit/css/style.css" rel="stylesheet">
</head>
<body>
    <div class="container-fluid">
        <!-- 导航栏 -->
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">
                    <i class="bi bi-gear-wide-connected"></i>
                    协议解析工具
                </a>
                <div class="navbar-nav ms-auto">
                    <a class="nav-link" href="#" data-bs-toggle="modal" data-bs-target="#aboutModal">
                        <i class="bi bi-info-circle"></i> 关于
                    </a>
                </div>
            </div>
        </nav>

        <!-- 可拖拽调整宽度的容器 -->
        <div class="resizable-container mt-3">
            <!-- 左侧：协议选择和输入 -->
            <div class="left-panel">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="bi bi-input-cursor"></i> 协议选择和报文输入
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="input-section">
                            <!-- 协议选择 -->
                            <div class="mb-3">
                                <label for="protocolSelect" class="form-label">选择协议类型：</label>
                                <select class="form-select" id="protocolSelect">
                                    <option value="chargingPile" selected>炬华充电桩协议</option>
                                    <option value="cjt188">CJT-188</option>
                                    <option value="qgdw3761">Q／GDW 376.1</option>
                                    <option value="dlt64507">DLT-645-2007</option>
                                    <option value="dyIot">端云水表协议</option>
                                    <option value="cdIot">常德水表协议</option>
                                    <option value="waterCollector">水表采集器协议</option>
                                    <option value="xintianWater">新天科技水表协议</option>
                                </select>
                            </div>

                            <!-- 报文输入 -->
                            <div class="mb-3 textarea-container">
                                <label for="messageInput" class="form-label">输入报文：</label>
                                <textarea class="form-control" id="messageInput" 
                                          placeholder="请输入要解析的报文内容..."></textarea>
                            </div>

                            <!-- 操作按钮 -->
                            <div class="button-section">
                                <div class="d-flex gap-2">
                                    <button type="button" class="btn btn-primary" id="parseBtn">
                                        <i class="bi bi-play-circle"></i> 解析报文
                                    </button>
                                    <button type="button" class="btn btn-secondary" id="clearBtn">
                                        <i class="bi bi-trash"></i> 清空
                                    </button>
                                </div>
                            </div>

                            <!-- 加载提示 -->
                            <div class="loading mt-3" id="loading">
                                <div class="d-flex align-items-center">
                                    <div class="spinner-border spinner-border-sm me-2" role="status">
                                        <span class="visually-hidden">Loading...</span>
                                    </div>
                                    <span>正在解析报文...</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 拖拽调整宽度的把手 -->
            <div class="resize-handle" id="resizeHandle"></div>

            <!-- 右侧：解析结果 -->
            <div class="right-panel">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="bi bi-file-earmark-text"></i> 解析结果
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="result-container">
                            <!-- 上部分：JSON格式结果 -->
                            <div class="result-top">
                                <h6>JSON格式结果：</h6>
                                <div class="json-container">
                                    <button class="btn btn-sm btn-outline-light copy-btn" id="copyJsonBtn" style="display: none;">
                                        <i class="bi bi-clipboard"></i> 复制
                                    </button>
                                    <div class="json-viewer" id="jsonResult">
                                        <div class="text-muted text-center py-5">
                                            <i class="bi bi-arrow-left-circle display-1"></i>
                                            <p class="mt-3">请选择协议类型并输入报文内容，然后点击解析按钮</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 中间拖拽条 -->
                            <div class="result-resize-handle" id="resultResizeHandle"></div>
                            
                            <!-- 下部分：表格结构结果 -->
                            <div class="result-bottom">
                                <h6>表格结构：</h6>
                                <div class="result-content" id="treeResult">
                                    <div class="text-muted text-center py-5">
                                        <i class="bi bi-table display-1"></i>
                                        <p class="mt-3">解析结果将以表格结构显示</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 关于对话框 -->
    <div class="modal fade" id="aboutModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">关于协议解析工具</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p><strong>版本：</strong>1.0.0</p>
                    <p><strong>描述：</strong>支持多种协议格式的报文解析工具</p>
                    <p><strong>支持的协议：</strong></p>
                    <ul>
                        <li>炬华充电桩协议</li>
                        <li>CJT-188</li>
                        <li>Q／GDW 376.1</li>
                        <li>DLT-645-2007</li>
                        <li>端云水表协议</li>
                        <li>常德水表协议</li>
                        <li>水表采集器协议</li>
                        <li>新天科技水表协议</li>
                    </ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="/protoDecToolkit/js/bootstrap.bundle.min.js"></script>
    <!-- Prism.js for syntax highlighting -->
    <script src="/protoDecToolkit/js/prism-core.min.js"></script>
    <script src="/protoDecToolkit/js/prism-json.min.js"></script>
    <!-- Custom JS -->
    <script src="/protoDecToolkit/js/app.js"></script>
</body>
</html> 
